<script>

import {alertFunctions, getAllDepartment, getAllFunctions} from "@/api/request";

export default {
  data() {
    return {
      dialogFormVisible: false,
      functions: [
        {
          functionId: 1,
          functionName: '',
          functionIndex: '',
          departId: 1,
          departName: ''
        }
      ],
      departments: [
        {
          departId: 1,
          departDetail: ''
        }
      ],
      value: 1,
      formData: {
        functionId: 1,
        departId: 1
      }
    }
  },
  methods: {
    handleClick(functionId) {
      this.dialogFormVisible = true
      this.formData.functionId = functionId
    },
    functionsSubmit() {
      this.formData.departId = this.value
      alertFunctions(this.formData).then(
          res => {
            if (res.data.code === 1) {
              this.$message.success("成功修改")
            } else {
              this.$message.error("失败")
            }
          }
      )
      this.dialogFormVisible = false
    }
  },
  mounted() {
    getAllFunctions().then(
        res => {
          if (res.data.code === 1) {
            this.functions = res.data.data
          }
        }
    )
    getAllDepartment().then(
        res => {
          if (res.data.code === 1) {
            this.departments = res.data.data
          }
        }
    )
  }
}
</script>

<template>
  <el-container>
    <el-main>
      <el-row>
        <el-table
            :data="functions"
            border
            style="width: 100%">
          <el-table-column
              prop="functionName"
              label="职能"
              width="550">
          </el-table-column>
          <el-table-column
              prop="departName"
              label="所属部门"
              width="550">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleClick(scope.row.functionId)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-dialog title="更改所属部门" :visible.sync="dialogFormVisible">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="department in departments"
                :label="department.departDetail"
                :value="department.departId">
            </el-option>
          </el-select>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="functionsSubmit">确 定</el-button>
          </div>
        </el-dialog>
      </el-row>
    </el-main>
  </el-container>
</template>

<style scoped>
::v-deep .el-table__row {
  background-color: #f9f4e9 !important;
}

::v-deep .el-table th.el-table__cell {
  background-color: #f9f4e9 !important;
}
</style>
